<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :tableHandles="tableHandles"
      :isSelection="false"
      :isIndex="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :isHandle="true"
      @refresh="init()"
    >
    </r-table>
    <!-- 编辑按钮打开的表单 -->
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="250px"
      dialogWidth="800px"
      :isHandle="true"
    />
    <!-- 导入赠送套餐失败的列表模板 -->
    <Abnormal ref="Abnormal"></Abnormal>
    <!-- 导入模板模态框 -->
    <uploadFileBattery
      v-if="uploadFile_fag"
      v-on:uploadFile_call="uploadFile_call"
    >
    </uploadFileBattery>
  </div>
</template>
<script>
import Abnormal from "./cus/Abnormal";
import uploadFileBattery from "../cus/uploadFileBattery";
export default {
  components: {
    Abnormal,
    uploadFileBattery
  },
  data() {
    return {
      uploadFile_fag: false, //控制导出模板模态框的显示隐藏
      searchData: {
        mealName: "",
        nickName: "",
        phone: "",
        ctime: "",
        validTime: ""
      },
      searchForm: [
        {
          type: "input",
          placeholder: "套餐名称",
          prop: "mealName",
          width: 200
        },
        {
          type: "input",
          placeholder: "用户昵称",
          prop: "nickName",
          width: 200
        },
        {
          type: "input",
          placeholder: "手机号",
          prop: "phone",
          width: 200
        },
        {
          type: "date",
          placeholder: "开始日期",
          prop: "ctime",
          width: 180,
          change: val => {
            this.searchData.ctime = val;
          }
        },
        {
          type: "date",
          placeholder: "结束日期",
          prop: "validTime",
          width: 180,
          change: val => {
            this.searchData.validTime = val;
          }
        }
      ],
      searchHandle: [
        {
          label: "搜索",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.init()
        }
      ],
      tableHandles: [
        {
          label: "导出赠送记录",
          type: "primary",
          icon: "el-icon-download",
          titles:
            "可以根据套餐名称、用户昵称、手机号、开始时间、结束时间筛选出订单再导出，也可以不选，直接导出全部订单",
          plain: true,
          loading: false,
          handle: async e => {
            const res = await this.apis.mealGiveRecordExport(this.searchData);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.code == 200 ? "success" : "error"
            });
            location.href =
              process.env.VUE_APP_URL + "/profile/download/" + res.msg;
          }
        },
        {
          label: "导出赠送记录模板",
          type: "primary",
          plain: true,
          icon: "el-icon-download",
          handle: async e => {
            location.href =
              process.env.VUE_APP_URL + "/profile/public/give_meal_phone.xlsx";
          }
        },

        {
          label: "赠送套餐",
          type: "primary",
          handle: e => {
            this.formData.status = 1;
            this.elFormVisible();
          }
        },
        {
          label: "直接导入赠送套餐",
          type: "primary",
          icon: "el-icon-upload2",
          handle: e => {
            this.uploadFile_fag = true;
          }
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "套餐名称",
          prop: "mealName"
        },
        {
          label: "用户昵称",
          prop: "nickName"
        },
        {
          label: "手机号",
          prop: "phone"
        },
        {
          label: "天数",
          prop: "days",
          formatter: e => (e.days ? e.days + "天" : "--")
        },
        {
          label: "次数",
          prop: "nums",
          formatter: e =>
            e.nums === -1 ? "不限次" : e.nums ? e.nums + "次" : "--"
        },
        {
          label: "开始时间",
          prop: "ctime"
        },
        {
          label: "套餐到期时间",
          prop: "validTime"
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        id: "",
        phone: ""
      },
      formCols: [
        {
          type: "select",
          label: "选择赠送的套餐",
          placeholder: "请选择",
          width: 350,
          prop: "id",
          options: []
        },
        {
          type: "textarea",
          label: "赠送用户的手机号",
          width: 350,
          prop: "phone",
          placeholder: "请输入用户的手机号，多个手机号请用 “，” 隔开"
        }
      ],
      formRules: {
        id: [{ required: true, message: "请选择套餐", trigger: "blur" }],
        phone: [{ required: true, message: "请输入", trigger: "blur" }]
      },
      formHandle: [
        {
          label: "取消",
          handle: e => this.elFormVisible()
        },
        {
          label: "确定",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  mounted() {
    this.init();
    this.agent_list();
  },
  methods: {
    async init() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };
      let res = await this.apis.mealGiveRecordList(parm);
      if (res) {
        this.tableData = res.rows || [];
        this.tablePage.total = res.total;
      }
    },

    // 编辑、新增--确认按钮
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let res = await this.apis.mealGiveMeal({
            id: this.formData.id,
            allots: [this.formData.phone] || [] //用户手机号集合
          });
          console.log(224345);
          this.$message({
            type: res.code == 200 ? "success" : "error",
            message: res.msg
          });
          this.init();
          this.elFormVisible();
          if (res.code == 501) {
            this.$refs.Abnormal.show_fun(res.data);
          }
        }
      });
    },
    // 编辑
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      if (this.formData.nums === -1) {
        this.formData.nums = "无限次";
      }

      this.formData.id = row.id;
      this.formData.status = row.status;
      this.elFormVisible();
    },
    //套餐列表
    async agent_list() {
      const res = await this.apis.mealList({
        pageNum: 1,
        pageSize: 100,
        name: ""
      });
      const list = res.rows || [];
      let options = [];
      list.map(res => {
        options.push({
          label: res.name,
          value: res.id
        });
      });
      this.formCols[this.labIndex2(this.formCols, "id")].options = options;
    },
    // 导入数据（子传父 接受从子组件传过来的方式与参数）
    uploadFile_call(fag, data) {
      this.uploadFile_fag = false;
      console.log(555, data);
      if (fag) {
        setTimeout(() => {
          this.init();
        }, 1000);
        setTimeout(() => {
          if (data) {
            this.$refs.Abnormal.show_fun(data);
          }
        }, 1500);
      }
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}

.Tip {
  margin-left: 20px;
}
</style>
